import {AfterContentInit, Component, EventEmitter, HostBinding, Input, OnInit, Output} from "@angular/core";


@Component({
  selector: 'app-tab-navbar-one',
  template: `
    <div class="icon">
      <!-- 支持使用图片 -->
      <img *ngIf="item.icon.startsWith('http')" [src]="item.icon" alt="">
      <!-- 支持使用字体图标 -->
      <span *ngIf="!item.icon.startsWith('http')" class="{{item.icon}}" #fontIcon></span>
    </div>
    <div class="name">{{item.name}}</div>
  `,
  styles: [`
    :host {
      width: 300px;
      padding: 50px 0;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    :host-context(.active) {
      background-color: rgba(144, 195, 31, .3); /* 30% 主色 */
    }
    :host-context(.active) .icon, :host-context(.active) .name {
      /*color: orangered;*/
    }

    .icon, .name {
      color: #666;
    }

    .icon {
      height: 32px;
      font-size: 32px;
    }

    .name {
      margin-top: 30px;
      font-size: 16px;
    }
  `]
})
export class TabNavbarOneComponent implements OnInit, AfterContentInit {


  @Input() item: any;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterContentInit(): void {
  }
}

@Component({
  selector: 'app-tab-navbar',
  templateUrl: './tab-navbar.component.html',
  styleUrls: ['./tab-navbar.component.scss']
})
export class TabNavbarComponent implements OnInit {
  static defaultItems = [
    {
      name: '公司简介',
      icon: 'wficon-company',
    },
    {
      name: '企业文化',
      icon: 'wficon-corporate-culture',
    },
    {
      name: '核心优势',
      icon: 'wficon-advantage',
    },
    {
      name: '加入我们',
      icon: 'wficon-join-us',
    },
  ];

  @Input() items = TabNavbarComponent.defaultItems;
  @Input() @HostBinding('style.width') width = '100%';

  @Input() currentItemIndex: Number;
  @Output() currentItemIndexChange: EventEmitter<Number> = new EventEmitter<Number>();

  constructor() {
  }

  ngOnInit() {
    this.currentItemIndexChange.subscribe((v:any) => this.currentItemIndex = v);
  }

  onItemClick(index:number) {
    this.currentItemIndexChange.next(index);
  }

}
